<template>
  <div class="line-chart" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
    <div
      ref="lineChart"
      :style="{
        width: '100%',
        height: 'calc((100% - 42px))',
        marginTop: '10px',
      }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    isCustom: {
      type: Boolean,
      default: false,
    },
    tooltip: {
      type: Object,
      default() {
        return {
          trigger: "axis",
        };
      },
    },
    top: {
      type: String,
      default: "40px",
    },
    left: {
      type: String,
      default: "40px",
    },
    bottom: {
      type: String,
      default: "20px",
    },
    right: {
      type: String,
      default: "40px",
    },
    xAxisData: {
      type: Array,
      default() {
        return [
          "00:00",
          "01:00",
          "02:00",
          "03:00",
          "04:00",
          "05:00",
          "06:00",
          "07:00",
          "08:00",
          "09:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
        ];
      },
    },
    title: {
      type: Array,
      default() {
        return [];
      },
    },
    series: {
      type: Array,
      default() {
        return [];
      },
    },
    splitNumber: {
      type: Number,
      default() {
        return 5;
      },
    },
    seriesIndex: {
      type: Number,
      default() {
        return 1;
      },
	},
	isDispatch:{
		type:Boolean,
		default:true
	}
  },
  data() {
    return {
      lineChart: "",
      options: {},
      number: 0,
      timer: null,
    };
  },
  watch: {
    allLatlngs: {
      handler(val) {
        this.$nextTick(() => {
          if (this.lineChart) {
            this.options.xAxis.data = this.xAxisData;
            this.options.grid.top = this.top;
            this.options.grid.left = this.left;
            this.options.grid.bottom = this.bottom;
            this.options.grid.right = this.right;
            this.options.series = this.series;
            this.options.tooltip = this.tooltip;
            this.lineChart.setOption(this.options);
			clearInterval(this.timer);
			if(this.isDispatch){
				this.dispatchAction("showTip");
			}
          }
        });
      },
      immediate: true,
    },
  },
  computed: {
    allLatlngs() {
      const { series, title } = this;
      return {
        series,
        title,
      };
    },
  },
  methods: {
    init() {
      this.lineChart = this.$echarts.init(this.$refs.lineChart);
      this.lineChart.resize();
      this.options = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.title,
          right: "1%",
          top: "1%",
          textStyle: {
            color: "#FFF",
            borderRadius: 4,
          },
        },
        grid: {
          top: "40px",
          left: "40px",
          bottom: "20px",
          right: "40px",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xAxisData,
          axisLabel: {
            interval: this.isCustom ? "auto" : "auto",
            textStyle: {
              color: "#FFF",
            },
            formatter: (par) => {
              if (this.isCustom) {
                let where = par.split("-");
                if (where.length > 1) {
                  return where[where.length - 1];
                } else {
                  return where[0];
                }
              } else {
                return par;
              }
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#FFF",
            },
          },
          minorTick: {
            splitNumber: this.splitNumber,
          },
        },
        animationDuration: 2000,
        animationEasing: "exponentialInOut",
        series: [],
      };
    },
    dispatchAction(type) {
      this.timer = setInterval(() => {
        this.lineChart.dispatchAction({
          type: type,
          seriesIndex: this.seriesIndex,
          dataIndex: this.number,
        });
        this.number++;
        if (this.number >= this.series[this.seriesIndex].data.length) {
          this.number = 0;
        }
      }, 2000);
      this.$once("hook:beforeDestroy", () => {
        clearInterval(this.timer);
      });
    },
    // 移入
    onMouseenter() {
      clearInterval(this.timer);
      this.lineChart.dispatchAction({
        type: "hideTip",
        seriesIndex: this.seriesIndex,
        dataIndex: this.number,
      });
    },
    // 移出
    onMouseleave() {
      this.dispatchAction("showTip");
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      window.addEventListener("resize", this.init, 20);
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.init);
  },
};
</script>
<style scoped>
.line-chart {
  padding: 5px;
  height: calc((100% - 42px));
  margin-top: 10px;
  box-shadow: 0 0 15px rgba(0, 252, 252, 0.3) inset;
  border-radius: 5px;
}
</style>